import React, { useEffect, useState } from "react";
import QueueAnim from "rc-queue-anim";
import "../styles/index.less";
import LazyLoad from "react-lazyload";
import { Row, Col } from "antd";
import { ImageViewer } from 'antd-mobile';
import { enquireScreen } from 'enquire-js';

const Retail = ({ dataSource, ...props }) => {
  const [visible, setVisible] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    enquireScreen((b) => {
      setIsMobile(!!b);
    });
  }, []);
  const { ...currentProps } = props;
  delete currentProps.dataSource;

  const goViewPic = () => {
    setVisible(true);
  }
  
  return (
    <div className="retail">
      <div {...currentProps} className="retail-banner park-banner">
        <QueueAnim
          key="QueueAnim"
          type={["bottom", "top"]} 
          className="banner-text-wrapper"
          delay={200}
        >
          <p className="banner-title">智慧园区</p>
          <p className="banner-describe">
            运用物联网、大数据和云计算等现代信息技术整合各个关键环节的资源，在此基础上进行实时分析和决策，赋能园区产业、运行、安防、决策等各方面，打造虚实结合的智能管控体系，提升园区综合竞争力。
          </p>
        </QueueAnim>
      </div>
      <div className="retail1-wrapper">
        <div className="c-grid-layout">
          <div className="case-top">
            <div>
              <span className="case-title">行业痛点</span>
              <div className="case-line"></div>
            </div>
          </div>
          <div className="case-list">
            <div className="list-inner">
              <Row>
                <Col xs={24} sm={24} md={8}>
                  <div className="item">
                    <img
                      className="icon"
                      src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/parkItem1.png"
                    />
                    <div>
                      <p className="title">园区管理运营能力薄弱</p>
                      <p className="subtitle">
                        园区的建设以碎片化功能建设为主、系统性考虑不足，各子系统封闭孤立，未有效收集各系统数据进行整合处理，园区管理粗放，运营效率低。
                      </p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} sm={24} md={8}>
                  <div className="item item2">
                    <img
                      className="icon"
                      src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/parkItem2.png"
                    />
                    <div>
                      <p className="title">园区供应链整合与协同困难</p>
                      <p className="subtitle">
                        园区物流设施种类多、规模大，缺乏全局规划，园区内部车辆调度及物流协同的可靠性和及时性得不到保障，高峰期车辆拥堵、收货码头/月台资源紧张。
                      </p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} sm={24} md={8}>
                  <div className="item item3">
                    <img
                      className="icon"
                      src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/parkItem3.png"
                    />
                    <div>
                      <p className="title">园区智慧化服务不足</p>
                      <p className="subtitle">
                        园区为企业所提供的智慧化服务不足，缺乏对用户体验的关注。企业的产业配套服务需求得不到支持，扶持政策获取困难；园区公众办事不便效率低，服务体验差。
                      </p>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>

      <div className="retail2-wrapper">
        <div className="c-grid-layout">
          <div className="case-top">
            <div>
              <span className="case-title">解决方案架构</span>
              <div className="case-line"></div>
            </div>
          </div>
          <div className="pic">
            <LazyLoad>
              {isMobile ? 
                <img onClick={goViewPic} src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/smartPark_h5.png'></img>:
                <img src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/parkSolution.png"></img>
              }
            </LazyLoad>
          </div>
        </div>
      </div>

      <div className="retail3-wrapper">
        <div className="c-grid-layout">
          <div className="case-top">
            <div>
              <span className="case-title">方案优势</span>
              <div className="case-line"></div>
            </div>
          </div>
          <div className="case-list">
            <div className="list-inner">
              <Row>
                <Col xs={24} sm={24} md={8}>
                  <div className="item">
                    <LazyLoad>
                      <img
                        className="icon"
                        src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/parkList1.png"
                      />
                    </LazyLoad>
                    <p className="title">丰富的园区建设经验</p>
                    <p className="subtitle">
                      依托顺丰产业资源，在近百个城市完成服务型智慧园区的布局，打造全国性产业服务网络。
                    </p>
                  </div>
                </Col>
                <Col xs={24} sm={24} md={8}>
                  <div className="item item2">
                    <LazyLoad>
                      <img
                        className="icon"
                        src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/parkList2.png"
                      />
                    </LazyLoad>
                    <p className="title">运营管理效率提升</p>
                    <p className="subtitle">
                      对园区各领域运行特征进行实时监测，实现全场景覆盖、多层级管理，多角色可视的智慧运营。
                    </p>
                  </div>
                </Col>
                <Col xs={24} sm={24} md={8}>
                  <div className="item item3">
                    <LazyLoad>
                      <img
                        className="icon"
                        src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/parkList3.png"
                      />
                    </LazyLoad>
                    <p className="title">智慧供应链协同</p>
                    <p className="subtitle">
                      依托顺丰核心能力构建园区供应链中台，实现从规划、计划、执行到控制的端至端协同及经营决策分析，帮助园区提升供应链服务水平，促进产业发展。
                    </p>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>
      <ImageViewer
        image='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/smartPark_h5.png'
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </div>
  );
};

export default Retail;
